<template>
    <view class="page">
        <!-- <headerline shownav=true  isback="true" @tapnav="tapnav"   :navstyle="navstyle"  :navitem="navitem"  :navselect="navselect" :statusbarheight='statusBarHeight'  ></headerline> -->

        <view v-if="navselect==0" style="padding: 25rpx;">
            <view class="ni">
                <view class="ni_cell" v-if="!isfrist">
                    <view>原始密码</view>
                    <input type="password" style="border-bottom: none;" id="password" v-model="pwd0" class="input1"
                        placeholder="请输入原始登录密码" />
                </view>
                <view class="ni_cell">
                    <view>新登录密码</view>
                    <input type="password" style="border-bottom: none;" id="password" v-model="pwd1" class="input1"
                        placeholder="请输入新登录密码" />
                </view>
                <view class="ni_cell">
                    <view>确认登录密码</view>
                    <input style="border-bottom: none;" type="password" id="password" v-model="pwd2" class="input1"
                        placeholder="再次输入新登录密码" oninput="checkpwd(this.value);"
                        onblur="check_other(this.value,'password');check_other($('#password2').val(),'password1');" />
                </view>
            </view>
           




            <view style="margin:15px auto;display:block;width: 100%;">


                <button class="button1" @tap="change_pwd()">确认修改</button>


            </view>

        </view>


        <view v-else>
            <ul class="profile">
                <li>手机号：</li>
                <li>

                    {{mobileshow}}

                </li>

            </ul>



            <ul class="profile">
                <li>验证码：</li>
                <li><input type="text" class="input1" id="randcode" v-model="randcode" placeholder="短信验证码" maxlength="6"
                        style="width:80px;height:30px;line-height: 30px;display: inline-block;vertical-align: middle;" />

                    <span class="sendbtn" @tap="sendsms()" style="display: inline-block;margin-left: 5px;"
                        v-if='!disabled'>发送短信</span>
                    <span class="sendbtn" style="display: inline-block;margin-left: 5px;" v-else>
                        <block v-if="issending">发送中...</block>
                        <block v-else>
                            {{getCodeTime}}秒后再获取
                        </block>
                    </span>

                </li>

            </ul>



            <ul class="profile">
                <li>新登录密码：</li>
                <li><input type="password" class="input1" id="pwd" v-model="pwd" placeholder="输入新的登录密码" />

                </li>

            </ul>
            <view style="margin:15px auto;display:block;width: 80%;">


                <button class="button1" @tap="reset_pwd()">
                    确认并提交
                </button>


            </view>



        </view>
    </view>
</template>

<script>
    import api from "../../library/index.js"
    import headerline from '../../components/header.vue'
    import http from "../../library/http.js"
    import uniIcons from '../../components/uni-icons/uni-icons.vue'
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    export default {
        components: {
            uniIcons,
            headerline,

        },
        data() {
            return {

                statusBarHeight: statusBarHeight + 'px',
                navitem: ['修改登录密码', ],
                navselect: 0,
                navstyle: "width:60%;left:20%",
                user: uni.getStorageSync('userInfo'),
                system: uni.getStorageSync('system'),
                isfrist: false,
                pwd0: '',
                pwd1: '',
                pwd2: '',
                pwd: '',
                step: 1,
                mobile: '',
                mobileshow: '',
                type: 'pwd',
                timer: null,
                getCodeTime: 60,
                disabled: false,
                issending: false,
                randcode: '',

            }
        },
        methods: {
            tapnav(num) {

                if (num == 1 && this.user.mobile == '') {
                    uni.showModal({
                        title: '提示',
                        content: "绑定手机号,才可以重置密码",
                        showCancel: true,
                        cancelText: '关闭',
                        confirmText: '绑定手机号',
                        success: res => {
                            if (res.confirm) {
                                uni.redirectTo({
                                    url: "/pages/mine/mobile"
                                })
                            }
                        }
                    });
                } else {
                    this.navselect = num;
                    if (num == 1) {
                        this.setuserdata();
                        this.getuserinfo();
                    }
                }
            },
            change_pwd() {

                if (!this.isfrist && this.pwd0 == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入原始登录密码',
                        duration: 1000
                    })

                    return false;
                }


                if (this.pwd1 == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入新登录密码',
                        duration: 1000
                    })

                    return false;
                }

                if (this.pwd1.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '新密码长度不能小于',
                        duration: 1000
                    })

                    return false;
                }
                if (this.pwd1 != this.pwd2) {
                    uni.showToast({
                        icon: 'none',
                        title: '两次密码输入不一致',
                        duration: 1000
                    })
                    return false;
                }


                http.setWait(true).post('user.php?act=change_pwd', {
                    method: 'login',
                    id: this.user.id,
                    password: this.pwd1,
                    oldpwd: this.pwd0,
                    isfrist: this.isfrist
                }).then(res => {

                    this.pwd0 = this.pwd1 = this.pwd2 = '';
                    uni.showToast({
                        icon: 'none',
                        title: '登录密码已修改成功',
                        duration: 1000
                    })
                })



            },
            sendsms() {
                var mobile = this.mobile;
                var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
                if (reg.test(mobile)) {

                    this.disabled = true;
                    this.issending = true;
                    http.setWait(true).post('user.php?act=sendCode', {
                        mobile: mobile,
                        type: this.type
                    }).then(res => {
                        this.issending = false;
                        if (res.data.method != 'error') {

                            var that = this;
                            clearInterval(that.timer);
                            that.timer = setInterval(function() {
                                that.getCodeTime--;
                                that.disabled = true;
                                if (that.getCodeTime <= 0) {
                                    that.disabled = false;
                                    that.getCodeTime = 60;
                                    clearInterval(that.timer);
                                }
                            }, 1000)

                        } else {
                            var that = this;
                            that.disabled = false;
                            that.getCodeTime = 60;
                            clearInterval(that.timer);
                            uni.showToast({
                                icon: 'none',
                                title: '短信发送失败',
                                duration: 1000
                            })
                        }

                    })

                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号码格式错误',
                        duration: 1000
                    })

                    return false;
                }

            },
            setuserdata() {
                if (this.user.mobile) {
                    this.mobile = this.user.mobile;
                    this.mobileshow = this.mobile.substr(0, 3) + "*****" + this.mobile.substr(this.mobile.length - 3,
                    3);


                }

            },
            getuserinfo() {
                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    uni.setStorageSync('userInfo', this.user)
                    this.setuserdata();
                })
            },
            reset_pwd() {
                var mobile = this.mobile;
                if (mobile == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号不能为空',
                        duration: 1000
                    })

                    return false;
                }
                var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
                if (!reg.test(mobile)) {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号码格式错误',
                        duration: 1000
                    })

                    return false;
                }
                if (this.randcode == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '短信验证码不能为空',
                        duration: 1000
                    })

                    return false;
                }
                if (this.pwd == '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请输入新登录密码',
                        duration: 1000
                    })

                    return false;
                }

                if (this.pwd.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '新密码长度不能小于6',
                        duration: 1000
                    })

                    return false;
                }

                http.setWait(true).post('user.php?act=reset_pwd', {
                    id: this.user.id,
                    mobile: mobile,
                    randcode: this.randcode,
                    pwd: this.pwd,
                    method: 'login'
                }).then(res => {

                    this.pwd = this.randcode = '';
                    uni.showToast({
                        icon: 'none',
                        title: '登录密码已重置成功',
                        duration: 1000
                    })
                })



            }
        },
        onLoad(opts) {
            var pwd = this.user.pwd;
            if (pwd == undefined || pwd == null || pwd == '') {
                this.isfrist = true;

            } else {
                this.isfrist = false;
            }

        }
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/user.css";

    .page {
        background-color: #e5e5e5;
        min-height: 100vh;
    }

    .profile,
    .login-lines1 {
        background-color: #fff;
        // margin: 10px auto;
        width: 100%;
        vertical-align: middle;
		border-bottom: 1px solid #eee;
		padding:  10upx 30upx;
    }
	.text-justify {
		text-align: justify;
		text-align-last: justify;
	}
    .profile li {
        vertical-align: middle;
    }

    .profile li:first-child {
        width: 100px
    }

    .profile li:last-child {
        width: calc(100% - 130px)
    }
</style>